<template>
  <div>
    <van-search show-action placeholder="请输入搜索内容" background="#4fc08d">
      <template #label>
        <span>地址</span>
      </template>
      <template #action>
        <van-icon name="location-o" size="20" color="#fff" />
      </template>
      <template #left>
        <van-icon name="arrow-left" class="arrow-left" />
      </template>
    </van-search>
    <van-dropdown-meun>
      <van-dropdown-item title="杭州">
        <template #default>
          <van-picker show-toolbar :columns="columns" @change="onChange" />
        </template>
      </van-dropdown-item>
      <van-dropdown-item title="杭州"></van-dropdown-item>
      <van-dropdown-item title="杭州"></van-dropdown-item>
      <van-dropdown-item title="杭州"></van-dropdown-item>
    </van-dropdown-meun>
  </div>
</template>

<script>
const cities = {
  云南: ['昆明', '曲靖', '昭通', '大理', '丽江'],
  浙江: ['杭州', '金华', '宁波', '温州', '东阳']
}
export default {
  data() {
    return {
      columns: [{ value: Object.keys(cities) }, { value: cities['昆明'] }]
    }
  },
  methods: {
    onChange(picker, value) {
      picker.setColumnValues(1, cities[value[0]])
    }
  }
}
</script>

<style scoped lang="less">
.arrow-left {
    margin-right: 15px;
}
</style>
